<template>
  <t-dialog
    v-model:visible="visible"
    :close-on-esc-keydown="false"
    :close-on-overlay-click="false"
    header=""
    :width="406"
    :cancel-btn="showCancel ? '取消' : null"
    :confirm-loading="loading"
    class="common-message-dialog"
    :class="{ 'show-cancel': showCancel }"
    @confirm="handleConfirm"
    @close="handleClose"
  >
    <div class="common-message-view">
      <div class="icon-wrap" :style="{ backgroundColor: messageData.bgColor }">
        <svg-icon
          :name="messageData.icon"
          :style="{ width: `${messageData.size}px`, height: `${messageData.size}px` }"
          class="icon"
        ></svg-icon>
      </div>
      <div class="text-wrap">
        <div class="content" :style="{ color: messageData.color }">{{ title }}</div>
        <div class="res">{{ tip }}</div>
      </div>
    </div>
  </t-dialog>
</template>

<script setup lang="ts">
import { toUpper } from 'lodash';
import { computed, PropType, ref } from 'vue';

import { COMMON_MESSAGE, MESSAGE_TYPE } from '@/constants';

const props = defineProps({
  title: {
    type: String as any,
    default: '',
  },
  tip: {
    type: String as any,
    default: '',
  },
  type: {
    type: String as PropType<MESSAGE_TYPE>,
    default: 'SUCCESS',
  },
  showCancel: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(['sure', 'close']);

const visible = ref(false);
const loading = ref(false);

const messageData = computed(() => {
  return COMMON_MESSAGE[toUpper(props.type)];
});

const open = async () => {
  visible.value = true;
};

const close = () => {
  loading.value = false;
  visible.value = false;
};

const handleConfirm = () => {
  loading.value = true;
  emits('sure');
};

const handleClose = () => {
  emits('close');
};

defineExpose({ close, open });
</script>

<style lang="less" scoped></style>
